<%@ page import="com.bean.Article" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.bean.Remark" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>说说博客-阅读文章</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/front/css/main.css">
    <style>
        .rightcontent a{
            text-align: center;
            text-decoration: none;
        }
    </style>

    <script type="text/javascript">
        window.onload=function () {
            var goodEl = document.getElementById('good');
            var goodcount = localStorage.clickcount;
            goodEl.innerText=goodcount;
        }
        <%--隐藏评论框--%>
        function funShowClose(){
            // var btnShowClose=document.getElementById("btnShowClose").style.display="none";
            if (document.getElementById("dv").style.display=="none"){
                document.getElementById("dv").style.display="block";

            } else {
                document.getElementById("dv").style.display="none";
            }
        }
        <%--隐藏评论回复框--%>
        function funshowClose(remarkId){
            document.getElementById("remarkId").value=remarkId;
            if (document.getElementById("dx").style.display=="none"){
                document.getElementById("dx").style.display="block";

            } else {
                document.getElementById("dx").style.display="none";
            }

        }
    </script>
    <%--点赞功能--%>
    <script>
        var zan = document.getElementById('zan');
        var num1 = document.getElementById('num1');
        var  noGoodEl = document.getElementById("noGood")
        var  hasGoodEl = document.getElementById("hasGood")
        var flag1 = 0;
        zan.onclick = function() {
            if (flag1 == 0) {
                num1.innerHTML++;
            }
            if (flag1 == 1) {
                num1.innerHTML--;
            }
            if (flag1 == 2) {
                num1.innerHTML++;
                flag1 = 0;
            }
            flag1++;
        }
        function cancelGood() {
            var  goodEl = document.getElementById("good")
            var  noGoodEl = document.getElementById("noGood")
            var  hasGoodEl = document.getElementById("hasGood")
            console.log(noGoodEl,hasGoodEl)
            if(typeof(Storage) !== "0") {
                if (localStorage.clickcount) {
                    localStorage.clickcount = Number(localStorage.clickcount)-1;
                } else {
                    localStorage.clickcount = 1;
                }

                goodEl.innerHTML = localStorage.clickcount ;
                noGoodEl.style.display='inline-block';
                hasGoodEl.style.display='none';

            }
            else {
                document.getElementById("good").innerText = "浏览器不支持";
            }
        }
        function clickCounter() {
            var  goodEl = document.getElementById("good")
            var  noGoodEl = document.getElementById("noGood")
            var  hasGoodEl = document.getElementById("hasGood")
            console.log(noGoodEl,hasGoodEl)
            if(typeof(Storage) !== "undefined") {
                if (localStorage.clickcount) {
                    localStorage.clickcount = Number(localStorage.clickcount)+1;
                } else {
                    localStorage.clickcount = 1;
                }
                console.dir(noGoodEl)
                console.log(noGoodEl.style)
                noGoodEl.style.display='none';
                hasGoodEl.style.display='inline-block';
                goodEl.innerHTML = localStorage.clickcount ;

            }
            else {
                document.getElementById("good").innerText = "浏览器不支持";
            }
        }
        function Re_turn() {
            window.top.location = "http://localhost:8088";
        }
    </script>
</head>
<body>
<%--头部--%>
<%@include file="../view/FrontTop.jsp"%>

<%--左边--%>
<%@include file="../view/FrontLeft.jsp"%>
    <style>
        .A_content{
        line-height: 50px;
        margin: 5px;
        padding-top: 10px;
        padding-left: 10px;}
        .A_content .Time{
            TEXT-ALIGN: right;
            display: block;
            margin: 0px 15px 0px 0px;

        }
        .A_content .A_content_title{
            display: flex;
            font-size: 16pt;
            font-weight: bold;
            color: #749b8e;
            justify-content: center;
        }
        .comments-area .comments-title{
            DISPLAY: flex;
            justify-content: center;
        }

    </style>
    <div class="right">
    <div class="rightcontent">

        <div class="A_content">
            <div class="Time">
                发表时间：${sessionScope.readSingle.pubtime} | 评论：${sessionScope.readSingle.remark} 条 | 阅读：${sessionScope.readSingle.count} 次
            </div>
            <div class="A_content_header">
                <span class="A_content_title">${sessionScope.readSingle.title}</span>
            </div>
            <div class="FullText">
                <div class="Text">${sessionScope.readSingle.content}</div>
            </div>
            <div>

        </div>
                <div class="comments-area">
                    <h4 class="comments-title">本文共"${sessionScope.remarkNum}"条评论</h4>

                            <div id="comment-show">
                                <c:forEach items="${all}" var="RE" >
                                <ul class="comment-list">
                                    <li class="comment-l">
                                        <div class="comment-wrap">
                                            <div class="comment-body">
                                                <h4 class="c-body">
                                                    <cite class="fn">
                                                        <b class="author">${RE.key.author}</b>
                                                    </cite>
                                                    <span class="comment-date">${RE.key.pubtime}</span>
                                                </h4>
                                                <p class="cp">${RE.key.recontent}</p>

                                                <div class="reply">
                                                    <input name="reply" type="button" class="reply" value="回复"  onclick="funshowClose(${RE.key.id})">
                                                </div>
                                                <ul class="reply-list">
                                                    <li class="reply-l">
                                                        <c:forEach items="${RE.value}" var="reply">
                                                        <div class="reply-wrap">
                                                            <div class="reply-body">
                                                                <h4 class="r-body">
                                                                    <cite class="fn">
                                                                        <b class="author">${reply.author}</b>
                                                                    </cite>
                                                                    <span class="reply-date">${reply.pubtime}</span>
                                                                </h4>
                                                                <p class="cp">${reply.reContent}</p>
                                                                <td style="border-top: #000000 solid 1px"></td>
<%--&lt;%&ndash;                                                                回复的回复&ndash;%&gt;--%>
<%--                                                                <div class="reply">--%>
<%--                                                                    <input name="reply" type="button" class="reply" value="回复"  onclick="funshowClose(${reply.id})">--%>
<%--                                                                </div>--%>
                                                            </div>
                                                        </div>
                                                        </c:forEach>
                                                    </li>

                                                </ul>

                                            </div>
                                            </div>

                                    </li>
                                </ul>
                                </c:forEach>
                            </div>
                    <div id="dx" style="display: none">
                        <form action="/addReply" method="post">
                            <input type="hidden" name="remarkId"  id="remarkId" value="0">
                            <div class="reply-sumbit" width="100%" border="0" cellspacing="8" cellpadding="0" style="margin-top:10px">
                                <div class="reply-item">
                                    <span id="r-author">评论者：</span>
                                    <td><input type="text" name="author" size="40" value="匿名好友"></td>
                                </div>
                                <div class="reply-item">
                                    <td align="center">评论内容：</td>
                                    <td><textarea name="content" rows="5" cols="95"></textarea></td>
                                </div>
                                <div class="reply-btn">
                                        <a href="/front/article/ArticleSingle.jsp">取消</a>&nbsp;&nbsp;&nbsp;
                                        <input  type="submit" value="提交" style="width:50px">
                                        <%--                                                        <input  type="reset" value="重置" style="width:50px" >--%>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>

        </div>
<%--<% } %>--%>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;

        <a href="javascript:void(0)" onclick="Re_turn()">返回</a>&nbsp;&nbsp;&nbsp;
        <input id="btnShowClose" type="button" value="评论" onclick="funShowClose()" class="ttbn">
<%--            发表评论模块--%>
        <div class="dian" style="display: inline-block">
            <div id="zan" style="display: inline-block;margin-left: 20px;">
                <div id="hasGood" style="display: none;vertical-align: bottom;">
                    <svg  t="1648886210412" onclick="cancelGood()" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2757" width="20" height="20" style="vertical-align: bottom"><path d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z" p-id="2758" fill="#d81e06"></path></svg>
                </div>
                <div id="noGood" style="vertical-align: bottom;display: inline-block;">
                    <svg  t="1648886210412" onclick="clickCounter()" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2757" width="20" height="20" style="vertical-align: bottom;"><path d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z" p-id="2758"></path></svg>
                </div>
                <span id="good" style="color: black"></span>
            </div>
        </div>
        <div id="dv" style="display: none">
                <form action="/addRemark" method="post">
                    <input type="hidden" name="action" value="followAdd">
                    <input type="hidden" name="articleId" value="${sessionScope.readSingle.id}">
                    <table width="100%" border="0" cellspacing="8" cellpadding="0" style="margin-top:10px">
                        <tr>
                            <td width="25%" align="center">评 论 者：</td>
                            <td><input type="text" name="author" size="40" value="匿名好友"></td>
                        </tr>
                        <tr>
                            <td align="center">评论内容：</td>
                            <td><textarea name="content" rows="10" cols="50"></textarea></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" value="提交" style="width:50px">
                                <input type="reset" value="重置" style="width:50px">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>



            <hr width="90%" style="margin-top:5px" size="1">
        </div>
    </div>


<%--底部--%>
<%@include file="../view/FrontEnd.jsp"%>

</body>
</html>
